<template>
  <div>
    <v-title>修改个人资料</v-title>
    <Nav></Nav>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>修改个人资料</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" :offset="7">
        <span class="title">用户名</span>
      </el-col>
      <el-col :span="5">
        <el-input
          v-model="username"
          placeholder="请输入用户名"
          validate-event
          disabled
        />
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="2" :offset="7">
        <span class="title">真实名字</span>
      </el-col>
      <el-col :span="5">
        <el-input
          v-model="realName"
          placeholder="请输入真实名字"
          validate-event
        />
      </el-col>
    </el-row>
    <br />
    <br />
    <br /><br />
    <el-row>
      <el-col :span="2" :offset="9">
        <el-button type="primary" @click="update">确定修改</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="info" @click="onReset">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VTitle from "@/components/Title";
import { getUserInfo, updateUser } from "@/api/index";
import { mapMutations } from "vuex";
import Nav from "@/components/Nav";
export default {
  name: "",
  components: {
    VTitle,
    Nav
  },
  data() {
    return {
      userInfo: this.$store.state.user.user,
      username: this.$store.state.user.user.username,
      realName: this.$store.state.user.user.nickname,
    };
  },
  methods: {
    ...mapMutations(["updateUser"]),
    onReset() {
      // 重置
      this.username = this.$store.state.user.user.username;
      this.realName = this.$store.state.user.user.nickname;
    },
    async update() {
      //let username = this.username;
      let realName = this.realName;
      let data = {
          //username,
          realName,
          id: this.$store.state.user.user.id
      }
      try {
        //修改用户信息
        await updateUser(data).then((res) => {
          if (res.code == "200") {

          } else {
            this.$message.error(res.msg);
            return;
          }
        });
        //记录用户信息
        let res = await getUserInfo();
        this.updateUser(res.data);
        //跳转到首页
        this.$router.push("/home");
        this.$message.success("修改个人信息成功~");
      } catch (error) {
        this.$message.error("修改个人信息失败~请稍后再试~");
      }
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}
.title {
  line-height: 34px;
  font-size: 16px;
  font-weight: bold;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  margin-bottom: 20px;
}
input {
  width: 40%;
}
</style>